<!--
 * @Author: GuoShuning
 * @Date: 2022-12-15 14:02:11
 * @LastEditors: LiuYan
 * @LastEditTime: 2022-12-21 14:10:02
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./common/css/coommon.css" />
    <script
      src="./common/js/jquery-1.7.2.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <title>合同管理列表</title>
  </head>

  <body>
    <div class="contractList" id="app">
      <div class="topBox itemBoxContent">
        <div class="itemBox_boxTitle">合同管理列表</div>
        <div class="allSelect">
          <div class="leftSelect" id="leftSelect">
            <div class="itemSelect">
              <div class="input-group">
                <label>项目名称</label>
                <input v-model="params.name" placeholder="输入关键字" />
              </div>
            </div>
            <div class="itemSelect">
              <div class="input-group">
                <label>经办人&#12288;</label>
                <input
                  v-model="params.name1"
                  placeholder="输入经办人姓名/联系方式"
                />
              </div>
            </div>
            <div class="itemSelect">
              <div class="input-group">
                <label>创建时间</label>
                <input v-model="params.name2" placeholder="输入关键字" />
              </div>
            </div>
            <div class="itemSelect">
              <div class="select-group">
                <label>合同名称</label>
                <input v-model="params.name3" placeholder="输入关键字" />
              </div>
            </div>
            <div class="itemSelect">
              <div class="select-group">
                <label>合同类型</label>
                <div class="options">
                  <input v-model="params.name4" placeholder="输入关键字" />
                  <ul>
                    <li>输入关键字</li>
                    <li>输入关键字</li>
                    <li>输入关键字</li>
                    <li>输入关键字</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="rightBtn">
            <button
              @click="()=>{
              dialog.show()
            }"
              id="showEl"
              class="button_primary button_icon"
            >
              <i class="bi bi-plus-lg"></i>新增合同
            </button>
            <button @click="get" class="button_primary_plain button_icon">
              <i class="bi bi-arrow-clockwise btnIcon"></i>查询
            </button>
            <button class="button_primary_plain button_icon">
              <i class="bi bi-arrow-clockwise btnIcon"></i>重置
            </button>
          </div>
        </div>
      </div>
      <div class="bottomBox itemBoxContent">
        <div class="tableListCount">合同总数 <span>12</span>个</div>
        <div class="table">
          <div class="table-header">
            <div class="tr">
              <div class="td" style="width: 12%">合同编号</div>
              <div class="td center" style="width: 15%">合同名称</div>
              <div class="td center" style="width: 15%">合同类型</div>
              <div class="td center" style="width: 15%">合同金额</div>
              <div class="td center" style="width: 15%">最近收付款时间</div>
              <div class="td center" style="width: 15%">创建人</div>
              <div class="td center" style="width: 15%">进度</div>
              <div class="td" style="width: 15%">操作</div>
            </div>
          </div>
          <div class="table-body">
            <div class="tr" v-for="item in list">
              <div class="td" style="width: 12%">合同编号</div>
              <div class="td center" style="width: 15%">合同名称</div>
              <div class="td center" style="width: 15%">合同类型</div>
              <div class="td center" style="width: 15%">555</div>
              <div class="td center" style="width: 15%">2022-11-22 00:43</div>
              <div class="td center" style="width: 15%">冯冯</div>
              <div class="td center" style="width: 15%">进度</div>
              <div class="td" style="width: 15%">
                <button class="button_success_text">收款</button>
                &ensp;
                <button class="button_primary_text">编辑</button>
                &ensp;
                <button class="button_error_text">删除</button>
              </div>
            </div>
          </div>
        </div>
        <div class="pagination">
          <span>共 {{total}} 条</span>
          <ul>
            <li @click="shang"><i class="bi bi-chevron-left"></i></li>
            <li
              v-show="start > 0"
              @click="()=>{
                if(start > 0){
                  params.page = start;
                  end-=3
                  start-=3
                }
              }"
            >
              ...
            </li>
            <li
              @click="onCurrentPage(item)"
              v-for="item in totalPage"
              v-show="item < end && item > start"
              :class="[item == params.page ? 'active' :'']"
            >
              {{item}}
            </li>
            <li
              v-show="end <= totalPage"
              @click="()=>{
                if(end <= totalPage){
                params.page = end;
                end+=3
                start+=3
                }
              }"
            >
              ...
            </li>
            <li @click="next"><i class="bi bi-chevron-right"></i></li>
          </ul>
        </div>
      </div>
      <div id="dialog-content_contractList">
        <iframe
          id="contract"
          src="./新建合同.html"
          frameborder="0"
          width="100%"
          height="100%"
          allowtransparency="true"
          frameborder="0"
        ></iframe>
      </div>
    </div>
  </body>
  <script src="./common/js/vue.js"></script>
  <script type="module">
    const { createApp } = Vue;
    import DiaLog from "./common/js/diaLog.js";
    createApp({
      data() {
        return {
          total: 0,
          totalPage: 0,
          start: 0,
          end: 4,
          list: [
            {
              isShow: true,
            },
            {
              isShow: true,
            },
            {
              isShow: true,
            },
          ],
          params: {
            page: 1,
            limit: 10,
          },
        };
      },
      //页面初始化加载
      mounted() {
        this.dialog = new DiaLog({
          title: "新增合同",
          width: "80% ",
          el: "#dialog-content_contractList",
          cancelText: "取消",
          confirmText: "确定",
          cancel: () => {
            this.dialog.hide();
          },
          confirm: () => {
            const contract =
              this.dialog.doc.querySelector("#contract").contentWindow;
            let data = contract.save();
            console.log(data);
          },
        });
        this.get();
      },
      //所有函数都写在这里
      methods: {
        shang() {
          if (this.params.page > 1) this.params.page--;
          if (this.params.page < this.start + 1) {
            this.end -= 3;
            this.start -= 3;
          }
          this.get();
        },
        next() {
          if (this.params.page < this.totalPage) this.params.page++;
          if (this.params.page > this.end - 1) {
            this.end += 3;
            this.start += 3;
          }
          this.get();
        },
        onCurrentPage(page) {
          this.params.page = page;
        },
        //接口
        get() {
          // ajax 请求
          // $.ajax()
          this.totalPage = 10; // 总页数
          this.total = 100; //总条数
        },
      },
    }).mount("#app");
  </script>
</html>
